<script setup lang="ts">

import {ref} from "vue";
import type {Page} from "@/interfaces/base";
import type {PageMovieOrderReqVO, PageMovieOrderRespVO} from "@/interfaces/order";
import {onLoad, onReachBottom, onShow} from "@dcloudio/uni-app";
import {usePageMovieOrderApi} from "@/services/api";

const list = ref([
  "全部",
  "已付款",
  "已取消"
])
const curNow = ref<number>(0)
const loadStatus = ref('loadmore')
const pageMovieOrderReq = ref<PageMovieOrderReqVO>({
  size: 10,
  current: 1
})
const movieOrderTableData = ref<Page<PageMovieOrderRespVO>>({
  list: [],
  total: 0
})
const listData = ref<PageMovieOrderRespVO[]>([])
const handleChange = (index: number) => {
  curNow.value = index
  pageMovieOrderReq.value.status = index
  init()
}
const init = async () => {
  pageMovieOrderReq.value.size = 10
  pageMovieOrderReq.value.current = 1
  const {data: res} = await usePageMovieOrderApi(pageMovieOrderReq.value)
  movieOrderTableData.value = res
  listData.value = movieOrderTableData.value.list
}
const goDetail = (order:PageMovieOrderRespVO) =>{
  uni.navigateTo({
    url:"/pages/mine/order-detail?order=" + JSON.stringify(order)
  })
}
onReachBottom(async ()=>{
  if(listData.value.length < movieOrderTableData.value.total){
    loadStatus.value = 'loading'
    ++pageMovieOrderReq.value.current
    const {data: res} = await usePageMovieOrderApi(pageMovieOrderReq.value)
    movieOrderTableData.value = res
    listData.value = [...listData.value,...movieOrderTableData.value.list]
  }else if (listData.value.length === movieOrderTableData.value.total){
    loadStatus.value = 'nomore'
  }
})
onShow(()=>{
  init()
})
onLoad(() => {
  init()
})
</script>

<template>
  <view class="container">
    <view>
      <u-subsection :list="list" :current="curNow" @change="handleChange" fontSize="28"></u-subsection>
    </view>
      <view class="order-list">
        <view class="order" v-for="(order,index) in listData" :key="index" @tap="goDetail(order)">
          <view class="order-left">
            <view class="movie-image">
              <up-image class="movie-image-item" mode="heightFix" :show-loading="true" :src="order.images" width="120rpx" height="240rpx"></up-image>
            </view>
          </view>
          <view class="order-right">
            <view class="order-info-item">
              <view class="movie-name">
                {{ order.movieName }}
              </view>
              <view class="order-id">
                订单号：{{ order.id }}
              </view>
              <view class="movie-start-time">
                场次时间：{{ order.movieStartTime }}
              </view>
              <view class="order-time">
                下单时间：{{ order.createTime }}
              </view>
              <view class="price">
                ￥{{ order.price }}
              </view>
              <view class="order-status" v-if="!order.auditStatus || order.auditStatus === 2">
                {{ order.isCancel === 1 ? "已取消" : "已完成" }}
              </view>
              <view class="order-status" v-if="order.auditStatus === 1">
                审核中
              </view>
              <view class="order-status" v-if="order.auditStatus === 3">
                审核不通过
              </view>
            </view>
          </view>
        </view>
        <view class="load">
          <u-loadmore fontSize="24" :status="loadStatus" v-if="movieOrderTableData.total > 0"/>
        </view>

    </view>
  </view>
  <view>
    <u-empty
        textSize="36rpx"
        mode="list"
        icon="http://localhost:8080/images/empty.png"
        v-if="movieOrderTableData.total === 0"
        iconColor="#eeeeee"
        iconSize="64rpx"
    >
    </u-empty>
  </view>
</template>

<style scoped>
.container{
  background-color: #eeeeee;
}
.order-list{
  display: flex;
  flex-direction: column;
}
.order{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 24rpx;
  background-color: #ffffff;
  margin: 24rpx;
  border-radius: 24rpx;
  box-shadow: 10rpx 10rpx 15rpx rgba(0,0,0,0.5),
   -10rpx -10rpx 15rpx rgba(255,255,255,0.7),
   5rpx 5rpx 15rpx rgba(0,0,0,0.3) inset,
   -5rpx -5rpx 15rpx rgba(255,255,255,0.7) inset;
}
.movie-image{
  display: flex;
  justify-content: center;
  align-items: center;
}
.order-left{
  flex-grow: 1;
}
.order-right{
  padding: 0 24rpx;
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.order-id,.movie-start-time,.order-status,.order-time{
  font-size: 24rpx;
}
.movie-name{
  font-size: 32rpx;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 4rpx;
  margin-bottom: 4rpx;
}
.price{
  color: #dd524d;
}
.price,.order-status{
  display: flex;
  justify-content: flex-end;
}
.load{
  margin-bottom: 24rpx;
}
</style>